<template>
  <div class="play-info-box">
    <div class="play-info">
      <div class="comput-times">
        <div class="times-title">
          <span>计算场次：</span>
          <div class="btn-box">
            <el-button type="primary" @click="handleCompareScheme">比选方案</el-button>
            <el-button type="success" @click="handleCompute">计算</el-button>
            <el-button type="warning" @click="handleAddCount">新增场次</el-button>
            <el-button
              v-if="props.showBtn"
              type="info"
              class="btn-plus"
              @click="handleAmplify"
              link
            >
              <el-icon>
                <FullScreen />
              </el-icon>
            </el-button>
          </div>
        </div>
        <div class="times-list" v-if="state.ccInfo.length > 0">
          <div
            :class="['times-item', currentTime == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.ccInfo"
            @click="handleClickTime(item, index)"
          >
            <span>{{ item.ccName }}</span>
            <span @click.stop="handleClickDelete(item)">X</span>
          </div>
        </div>
        <div class="times-list" v-else>
          <span>暂无</span>
        </div>
      </div>
      <div class="result-info">
        <div class="content-box">
          <div class="content-left">
            <div class="left-title">区域名称</div>
            <div class="left-box">
              <div
                :class="['box-item', state.currentArea == index ? 'active' : '']"
                :key="index"
                v-for="(item, index) in state.secList"
              >
                <el-tooltip :content="item.zName" placement="top" :disabled="item.zName.length < 5">
                  <span @click="handleClickArea(item, index)">{{ item.zName }}</span>
                </el-tooltip>
                <!-- <span>
                  <el-icon @click.stop="handlePositionSec(item)">
                    <Position />
                  </el-icon>
                </span> -->
              </div>
              <!-- <div class="box-btn" @click="handleChangeArea()">区域调整</div> -->
            </div>
          </div>
          <div class="content-left">
            <div class="left-title">控制断面名称</div>
            <div class="left-box">
              <el-collapse v-model="state.collapseActive" accordion @change="handleSwitchCollapse">
                <el-collapse-item name="1">
                  <template #title>
                    <span class="mg10">水库/闸/坝</span>
                  </template>
                  <div class="tabs-list">
                    <div
                      :class="['list-item', state.currentSec === index ? 'active' : '']"
                      v-for="(item, index) in state.secArr.filter(
                        (v) => v.sttp == 'RR' || v.sttp == 'DD' || v.sttp == 'DM'
                      )"
                      :key="index"
                      @click="handleClickSec(item, index)"
                    >
                      <el-tooltip
                        :content="item.blknm"
                        placement="top"
                        :disabled="item.blknm.length < 6"
                      >
                        <span>{{ item.blknm }}</span>
                      </el-tooltip>
                      <span>
                        <el-icon @click.stop="handlePositionSec(item)">
                          <Position />
                        </el-icon>
                      </span>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template #title>
                    <span class="mg10">水文/水位</span>
                  </template>
                  <div class="tabs-list">
                    <div
                      :class="['list-item', state.currentSec === index ? 'active' : '']"
                      v-for="(item, index) in state.secArr.filter(
                        (v) => v.sttp == 'ZQ' || v.sttp == 'ZZ'
                      )"
                      :key="index"
                      @click="handleClickSec(item, index)"
                    >
                      <el-tooltip
                        :content="item.blknm"
                        placement="top"
                        :disabled="item.blknm.length < 6"
                      >
                        <span>{{ item.blknm }}</span>
                      </el-tooltip>
                      <span>
                        <el-icon @click.stop="handlePositionSec(item)">
                          <Position />
                        </el-icon>
                      </span>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          <div class="content-right">
            <div class="switch-box">
              <div class="comput-result-box">
                <div class="box-title">
                  <span>各场次计算结果：</span>
                </div>
                <div class="box-form">
                  <div class="form-item">
                    <div class="item-title1">
                      <span class="fonsize-color">场次名称:</span>
                      <span>{{ state.ccBaseInfo?.ccName }}</span>
                    </div>
                    <div class="item-title">
                      <span class="fonsize-color">开始/结束时间:</span>
                      <span
                        >{{ state.ccBaseInfo?.startTime }} -{{ state.ccBaseInfo?.endTime }}</span
                      >
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="item-title1">
                      <span class="fonsize-color">计算耗时:</span>
                      <span>{{ formatSeconds(state.ccBaseInfo?.calTime) }}</span>
                    </div>
                    <div class="item-title">
                      <span class="fonsize-color">评定结果:</span>
                      <span class="pass">{{ calcResult.info?.qual == 1 ? '不合格' : '合格' }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="table-btn">
                <el-button type="primary" @click="handleOpenTable" size="mini">特征值</el-button>
              </div>
              <div class="echarts-box">
                <SwDispatchChart
                  v-if="state.waterFlag == 1"
                  height="100%"
                  :x-labels="state.sysTimes"
                  :servers="state.servers"
                />
                <SkDispatchChart
                  v-else
                  height="100%"
                  :x-labels="state.sysTimes"
                  :servers="state.servers"
                />
                <!-- <morey-chart height="100%" :servers="state.servers" :x-labels="state.sysTimes" /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <mulTable ref="mulTableRef" />
    <countAdd ref="countAddRef" @closeDialog="closeDig" />
    <compareScheme ref="compareSchemeRef" @handleSelectedScheme="handleSelectedScheme" />
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineEmits } from 'vue'

//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
import emitter from '@/utils/bus'
//新增场次
import countAdd from './cpns/countAdd.vue'
//
import mulTable from './cpns/mulTable.vue'
//比选方案
import compareScheme from './cpns/compareScheme.vue'
import {
  getZoneList,
  getAreaSecList,
  getCcScheme,
  deleteRsysCount,
  riverSchemeCountComput,
  getCcResult
} from '@/services/modules/compute-methods'
import { useBlkcd } from '@/store/modules/compute-methods.js'
import { storeToRefs } from 'pinia'
import moreyChart from '@/components/app-echart/water-station-chart.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 1
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  zoneId: {
    type: Number,
    default: 1
  }
})
const compareSchemeRef = ref(null)
const countAddRef = ref(null)
const mulTableRef = ref(null)
const currentTime = ref(0)
const calcResult = ref({
  info: {},
  ccResult: {},
  // 统计图左侧列表信息
  eigResult: [
    // floodPeak:洪峰，floodVolume：洪量，waterLevel：水位，FlashTime：洪现时间
    {
      leftKey: '模拟',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    },
    {
      leftKey: '实测',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    },
    {
      leftKey: '误差',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    },
    {
      leftKey: '许可误差',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    }
  ]
})
const state = reactive({
  collapseActive: '1',
  fcTime: '',
  servers: [],
  warnInfo: {},
  //场次信息
  ccBaseInfo: {},
  //方案特征值集合
  eigResultArr: [],
  ccid: '',
  bacids: '',
  currentArea: 0,
  currentSec: 0,
  secName: '',
  current: 0,
  secList: [],
  zoneSchemeArr: [],
  zoneSchemeValue: '',
  secArr: [],
  ccInfo: [],
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  tableData: [],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: []
})
function handleSwitchCollapse(val) {
  state.currentSec = 0
  if (val == 1) {
    handleClickSec(state.secArr.filter((v) => v.sttp == 'RR')[0], 0)
  } else {
    handleClickSec(state.secArr.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
//秒转小时分钟
function formatSeconds(value) {
  var theTime = parseInt(value) // 需要转换的时间秒
  var theTime1 = 0 // 分
  var theTime2 = 0 // 小时
  var theTime3 = 0 // 天
  if (theTime > 60) {
    theTime1 = parseInt(theTime / 60)
    theTime = parseInt(theTime % 60)
    if (theTime1 > 60) {
      theTime2 = parseInt(theTime1 / 60)
      theTime1 = parseInt(theTime1 % 60)
      if (theTime2 > 24) {
        //大于24小时
        theTime3 = parseInt(theTime2 / 24)
        theTime2 = parseInt(theTime2 % 24)
      }
    }
  }
  var result = ''
  if (theTime > 0) {
    result = '' + parseInt(theTime) + '秒'
  }
  if (theTime1 > 0) {
    result = '' + parseInt(theTime1) + '分' + result
  }
  if (theTime2 > 0) {
    result = '' + parseInt(theTime2) + '小时' + result
  }
  if (theTime3 > 0) {
    result = '' + parseInt(theTime3) + '天' + result
  }
  return result
}
function handleClickTime(item, index) {
  state.ccid = item.id
  storeToRefs(useBlkcd()).ccid.value = item.id
  currentTime.value = index
  if (state.secArr.filter((v) => v.sttp == 'RR')) {
    // 默认选中第一个水库
    handleSwitchCollapse(1)
  } else {
    // 默认选中第一个水文
    handleSwitchCollapse(0)
  }
  function handleSwitchCollapse(val) {
    state.currentSec = 0
    if (val == 1) {
      handleClickSec(state.secArr.filter((v) => v.sttp == 'RR')[0], 0)
    } else {
      handleClickSec(state.secArr.filter((v) => v.sttp == 'ZQ')[0], 0)
    }
  }
}
function handleAddCount() {
  countAddRef.value.handleOpenModal(props.schemeId)
}
//刷新场次
function closeDig() {
  getSchemesCountList(props.schemeId)
}
// //区域调整
// function handleChangeArea(){
//   console.log('123',state.riverObj);
//    riverModalRef.value.handleOpenModal(state.riverObj)
// }
function handleOpenTable() {
  mulTableRef.value.handleOpenModal(state.eigResultArr)
}
function handleCompute() {
  riverSchemeCountComput({
    scid: props.schemeId,
    ccid: state.ccid,
    zoneId: props.zoneId,
    bscids: state.bacids
  }).then((res) => {
    if (res.code === 200) {
      if (state.secArr.filter((v) => v.sttp == 'RR')) {
        // 默认选中第一个水库
        handleSwitchCollapse(1)
      } else {
        // 默认选中第一个水文
        handleSwitchCollapse(0)
      }
    }
  })
}
//获取河系场次列表
function getSchemesCountList(id) {
  getCcScheme({ scid: id }).then((res) => {
    if (res.code === 200) {
      state.ccInfo = res.data
      if (state.ccInfo.length) {
        handleClickTime(state.ccInfo[0], 0)
      }
    }
  })
}
//删除河系场次
function handleClickDelete(item) {
  ElMessageBox.confirm(`是否删除${item.ccCode}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteRsysCount({ id: item.id }).then((res) => {
        if (res.code === 200) {
          getSchemesCountList(props.schemeId)
        }
      })
    })
    .catch(() => {})
}
//点击区域
function handleClickArea(item, index) {
  state.currentArea = index
  getAreaSecList({ zid: item.zid }).then((res) => {
    if (res.code === 200) {
      state.secArr = res.data
      if (state.secArr.length) {
        emitter.emit('mapArea', state.secArr)
        handleClickSec(state.secArr[0], 0)
      }
    }
  })
}

function clearEchart() {
  state.sysTimes = []
  state.rainArr = []
  state.rqArr = []
  state.fqArr = []
  state.rzArr = []
  state.fzArr = []
  state.warnInfo = {}
  state.fcTime = ''
  state.servers = []
}
function handlePositionSec(item) {
  emitter.emit('fixedPosition', item)
}
function handleClickSec(item, index) {
  if (item.sttp == 'RR') {
    state.waterFlag = 2
    console.log('11')
  } else {
    state.waterFlag = 1
    console.log('22')
  }
  clearEchart()
  state.currentSec = index
  state.secName = item.blknm
  getCcResult({ ccid: state.ccid, blkcd: item.blkcd }).then((res) => {
    if (res.code === 200 && res.data) {
      // state.servers = res.data
      // state.eigResultArr = res.data[0].result
      // state.ccBaseInfo = res.data[0].info
      // state.fcTime = state.ccBaseInfo.fcTime
      // state.eigResultArr.forEach((item) => {
      //   if (item.ccResult.length) {
      //     item.ccResult.forEach((v) => {
      //       state.sysTimes.push(v.tm)
      //       state.rainArr.push(v.p)
      //       state.rqArr.push(v.rq)
      //       state.fqArr.push(v.fq)
      //       state.rzArr.push(v.rz)
      //       state.fzArr.push(v.fz)
      //     })
      //   }
      // })
      // state.warnInfo = state.eigResultArr[0].warnInfo
      // //  state.warnInfo.wrq ='125'
      // console.log(state.warnInfo, '666')
      state.servers = res.data[0].result
      state.servers = state.servers.map((item) => {
        return { ...item, ...res.data[0].info, scName: item.scInfo.sc_name }
      })
      state.eigResultArr = res.data[0].result
      // if (res.data[0].result == []) {
      //   state.servers = [];
      //   emitter.emit("clearEcharts");
      // }
      state.ccBaseInfo = res.data[0].info
    }
  })
  console.log(item, '不太')
  // emitter.emit('fixedPosition', item)
  emitter.emit('fixedSec', item.blkcd)
}
//获取河系区域
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getZoneList({ rsid: id }).then((res) => {
      if (res.code === 200) {
        state.secList = res.data
        resolve(state.secList)
      }
    })
  })
}
function handleCompareScheme() {
  compareSchemeRef.value.handleOpenModal({
    zId: props.zId,
    schemeId: props.schemeId
  })
}
function handleSelectedScheme(arr) {
  state.bacids = arr
  handleCompute()
}
watch(
  () => props.zId,
  async () => {
    await getSecList(props.zId)
    // 默认选中第一个区域
    handleClickArea(state.secList[0], 0)
  },
  { immediate: true, deep: true }
)
watch(
  () => props.schemeId,
  () => {
    getSchemesCountList(props.schemeId)
  },
  { immediate: true, deep: true }
)
const emit = defineEmits(['showDialog'])
// 放大
function handleAmplify() {
  emit('showDialog')
}
</script>

<style lang="less" scoped>
.play-info-box {
  width: 100%;
  height: 100%;

  // .play-info-left {
  //   width: 150px;
  //   height: 100%;
  //   border-right: 2px solid #eee;
  //   .left-title {
  //     height: 40px;
  //     background: #eee;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     color: black;
  //   }
  //   .left-box {
  //     height: calc(100% - 40px);
  //     overflow-y: auto;
  //     .box-item {
  //       height: 30px;
  //       color: gray;
  //       display: flex;
  //       justify-content: space-between;
  //       align-items: center;
  //       span:nth-of-type(2) {
  //         color: #409eff;
  //         margin-right: 10px;
  //       }
  //     }
  //   }
  // }
  .play-info {
    width: 100%;
    height: 100%;
    .comput-times {
      width: 100%;
      height: 70px;
      margin-bottom: 20px;
      .times-title {
        font-size: 14px;
        height: 40px;
        display: flex;
        justify-content: space-between;

        span {
          // font-weight: 600;
          color: #409eff;
          // line-height: 40px;
          // margin-left: 10px;
        }
        .btn-box {
          .btn-plus {
            font-size: 25px;
            font-weight: bold;
          }
        }
      }
      .times-list {
        display: flex;
        width: 100%;
        height: 40px;
        overflow-x: auto;
        white-space: nowrap;
        .times-item {
          font-size: 14px;

          width: 150px;
          height: 30px;
          border: 1px solid gray;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          padding: 0 15px;
          cursor: pointer;
          &.active {
            span {
              color: #0154db;
              margin-left: 15px;
            }
          }
          &:hover {
            color: #0154db;
          }
          span {
            color: gray;
            margin-left: 15px;
          }
        }
      }
    }
    .result-info {
      width: 100%;
      height: calc(100% - 90px);
      .content-box {
        display: flex;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        .content-left {
          width: 140px;
          height: calc(100% - 10px);
          border: 1px solid #c8c2c29d;
          margin: 0 5px;
          .left-title {
            font-size: 14px;
            height: 40px;
            background: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
          }
          .left-box {
            height: calc(100% - 40px);
            overflow-y: auto;
            .mg10 {
              width: 100%;
              text-align: center;
              margin-left: 10px;
            }
            :deep(.el-collapse-item__wrap) {
              border: none;
            }
            :deep(.el-collapse-item__header) {
              padding-left: 10px;
            }
            .list-item,
            .box-item {
              padding-left: 5px;
              font-size: 14px;
              height: 30px;
              color: gray;
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-align: center;
              span:nth-of-type(1) {
                width: 100%;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &.active {
                span:nth-of-type(1) {
                  cursor: pointer;
                  color: #409eff;
                }
              }
              &:hover {
                span:nth-of-type(1) {
                  cursor: pointer;

                  color: #409eff;
                }
              }
              span:nth-of-type(2) {
                color: #409eff;
                margin-right: 10px;
              }
            }
          }
          .box-btn {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #409eff;
            color: #fff;
            cursor: pointer;
          }
        }
        .content-right {
          width: calc(100% - 300px);
          height: calc(100% - 10px);
          overflow: hidden;
          .switch-box {
            width: 100%;
            // height: calc(100% - 70px);
            // height: 400px;
            height: 100%;
            overflow-y: auto;
            .comput-result-box {
              width: 100%;
              .box-title {
                font-size: 14px;
                height: 30px;
                padding-top: 10px;
                color: #409eff;
                padding-left: 5px;
                // span {
                //   font-weight: 600;
                // }
              }
              .box-form {
                .form-item {
                  display: flex;
                  justify-content: space-between;
                  // flex-wrap: wrap;
                  // width: 100%;
                  margin-left: 5px;
                  .pass {
                    color: #78ba1c;
                  }
                  .item-title {
                    font-size: 14px;
                    width: 60%;
                    .fonsize-color {
                      color: #797979;
                    }
                    &:nth-of-type(1) {
                      width: 40%;
                    }
                    span:nth-of-type(1) {
                      margin-right: 10px;
                    }
                    span:nth-of-type(2) {
                      font-weight: 600;
                    }
                  }
                  .item-title1 {
                    font-size: 14px;
                    // flex: 0.25;
                    // margin-right: 20px;
                    height: 30px;
                    width: 40%;

                    .fonsize-color {
                      color: #797979;
                    }
                    &:nth-of-type(1) {
                      width: 40%;
                    }
                    span:nth-of-type(1) {
                      margin-right: 10px;
                    }
                    span:nth-of-type(2) {
                      font-weight: 600;
                    }
                  }
                }
              }
            }
            .table-btn {
              text-align: right;
            }
            .echarts-box {
              width: 100%;
              // height: calc(100% - 70px);
              height: 500px;
              // padding: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
